﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<div id="imgmarquee" style="overflow: hidden; width: 580px; align: left; background-color: #0099CC;">
    <div style="width: 1200px">
        <!--id="marquePic1"里面的宽度一定要大于id="imgmarquee"的宽度才能看到效果 width:600px;>WIDTH: 580px;

大的div宽度要为span的两倍才可以，不然会换行width:1200px zdz的作品，流风的作品 -->
        <span id="marquePic1" style="width: 600px; background-color: #990033;">
        <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> <img src="../images/dialog/4.gif" /> </span>
        <span id="marquePic2" style="width: 600px; background-color: #990033;"></span>
    </div>
</div>

<script type="text/javascript"> 
    var imgmarquee = document.getElementById('imgmarquee');
    var marquePic2 = document.getElementById('marquePic2');
    var marquePic1 = document.getElementById('marquePic1');
    var speed=10;//控制移动的速度,数越大越慢

    marquePic2.innerHTML=marquePic1.innerHTML;//把marquePic1的内容复制到marquePic2里面

    function Marquee(){ 
        if(imgmarquee.scrollLeft>=marquePic1.scrollWidth){ 
            imgmarquee.scrollLeft=0;
        }else{ 
            imgmarquee.scrollLeft++; 
        }
    } 

    var marqueetemp=setInterval(Marquee,speed); 

    imgmarquee.onmouseover=function() {clearInterval(marqueetemp)} //鼠标移到上面停止并清除计数 
    imgmarquee.onmouseout=function() {marqueetemp=setInterval(Marquee,speed)} //鼠标离开重新计数

</script>

</body>
</html>
